<template>
    <div style="">
      <van-row>
          <van-col span="24">
                <van-cell  :border="false" title="华莱士">
                    <template #icon>
                          <van-icon  style="font-weight: bolder;"  @click="Return" size="22" name="arrow-left" />
                    </template>
                  <template #right-icon>
                      <div style="display: flex; align-items: center; justify-content: space-around;">
                           <van-icon @click="share" size="20" name="share"/>
                      </div>
                  </template>
                </van-cell>
          </van-col>
        <van-col span="24">
          <van-cell-group class="itemHeader" inset>
            <van-cell title="华莱士">
              <template #right-icon>
                <van-image
                    width="3rem"
                    height="3rem"
                    src="https://img01.yzcdn.cn/vant/cat.jpeg"
                />
              </template>
              <template #label>
                <span style="color: black;">商家配送约为20分钟</span>
                <van-divider />
                <span style="display: flex; align-items: center; justify-content: flex-start; font-size: 1em;">
                  公告：工学院宿舍全部都可以送到
                  <van-icon name="arrow-down" style="padding-left: 10px;" />
                </span>
              </template>
            </van-cell>
          </van-cell-group>
        </van-col>
        <van-col span="24" style="margin-top: 10px;">
            <van-tabs sticky @change="change" swipeable v-model="active" >
            <van-tab title="点餐">
                <van-swipe :autoplay="3000" class="swipeClass" indicator-color="white">
                  <van-swipe-item v-for="(image,index) in images" :key="index">
                    <van-image :lazy-load="true" width="100%"  height="100" :src="image" radius="2"/>
                  </van-swipe-item>
                </van-swipe>
              <van-tree-select height="140vw" style="margin-top: .5rem;" selected-icon="chat-o"  :items="siderbarTitle" :main-active-index.sync="activeIndex">
                <template #content>
                  <van-col span="24" v-if="activeIndex ==0">
                    <van-divider>百亿补贴</van-divider>
                    <van-card
                        @click-thumb="desClick"
                        centered
                        style="background:white;"
                        origin-price="46"
                        :price="price"
                    >
                      <template #title>
                        <p  class="cateTitle" >畅享双人餐</p>
                      </template>
                      <template #desc>
                        <p class="cateDesc" style="color: #f52443;">
                          本店人气升第 1
                        </p>
                        <p style="padding-bottom: 10px;">
                          月销 39
                        </p>
                      </template>
                      <template #tags>
                        <van-tag plain type="danger">百亿补贴</van-tag>
                        <van-tag plain type="danger" >限1份</van-tag>
                      </template>
                      <template #footer>
                        <van-stepper v-model="num" default-value="0" min="0"  max="99" theme="round" button-size="22" disable-input />
                      </template>
                      <template #thumb>
                        <van-image
                            width="80"
                            height="80"
                            :lazy-load="true"
                            fit="fill"
                            src="https://gitee.com/herther/img/raw/master/img/20210914161025.png"
                        >
                          <template v-slot:loading>
                            <van-loading type="spinner" size="20" />
                          </template>
                          <template v-slot:error>图片加载失败</template>
                        </van-image>
                      </template>
                    </van-card>
                  </van-col>

                </template>
              </van-tree-select>
              <van-submit-bar :price="(price* num)*100" button-text="提交订单" @submit="onSubmit" >
                <template #default>
                  <span>
                    <span  @click="popupClick">
                       <van-badge :content="num">
                        <icon-svg icon-class="my-icon-waimai1" size="2.2"></icon-svg>
                      </van-badge>
                    </span>
                  </span>
                  <van-popup :transition-appear="true"  v-model="show" round position="bottom" :style="{ height: '50%' }">
                    <van-cell center>
                      <template #title>
                        <span>已选商品</span>
                      </template>
                      <template #default>
                      </template>
                      <template #extra>
                          <span style="font-size: 1em; color: #7f7f7f;">清空</span>
                        <van-icon name="delete" size=".9em" color="#7f7f7f" style="display: flex;align-items: center; padding-left: 2px;" />
                      </template>
                    </van-cell>
                    <van-cell center v-for="i in 10">
                      <template #icon>
                        <van-image
                             style="padding-right: 10px;"
                              width="50"
                              height="50"
                              :lazy-load="true"
                              fit="fill"
                              src="https://gitee.com/herther/img/raw/master/img/20210914105900.png"
                        />
                      </template>
                      <template #title>
                          <span>畅享双人餐</span>
                      </template>
                      <template #label>
                        <span style="color: #f52443;">￥28.5</span>
                          <span style="color: rgba(75,75,75,0.8); text-decoration: line-through; font-size: 0.3em; padding-left: 5px;">￥28.5</span>
                      </template>
                      <template #default>
                        数量 {{num}}
                      </template>
                    </van-cell>
                  </van-popup>
                </template>
                <template #button >
                  <van-button color="linear-gradient(to right, #f52443, #ef5350)" @click="PayClick" @touchstart="PayClick" :loading="PayLoading" loading-text="正在生成订单"  round size="normal">立即结算</van-button>
                </template>
              </van-submit-bar>
            </van-tab>
              <van-tab title="评价" badge ="300">
                <van-cell-group  :border="false" inset  style="margin-top: .5rem;">
                  <van-cell center>
                     <template #title>
                       <span style="font-size: 1.5em; color: #f52443; font-weight: bold;">{{ evaluate }}</span>
                       <span style="padding-left: 5px;"><van-rate size=".1em" gutter="12" v-model="evaluate" readonly /></span>
                     </template>
                    <template #default>
                      <van-tag style="float: right;" type="warning">口味 4.4</van-tag>
                    </template>
                  </van-cell>
                </van-cell-group>
                <van-col span="24" style="margin-top: 10px;">
                  <van-tabs type="card" sticky animated>
                    <van-tab :title="'好评'+200">
                          <van-col span="24">
                             <van-cell :border="false">

                             </van-cell>
                          </van-col>
                    </van-tab>
                    <van-tab :title="'差评'+100">内容 2</van-tab>
                  </van-tabs>
                </van-col>
              </van-tab>
              <van-tab title="商家">
                <van-cell-group inset style="margin-top: 10px;">
                  <van-cell size="large" :border="false"  center >
                    <template #icon>
                      <icon-svg icon-class="my-icon-zu" size="1.3"></icon-svg>
                    </template>
                    <template #title>
                      <span>厦门市集美区后溪镇孙版南路1251号</span>
                    </template>
                  </van-cell>
                  <van-cell size="large" :border="false" icon="phone-o"  title="联系电话" value="1357652728">
                    <template #icon>
                      <icon-svg icon-class="my-icon-dianhua-copy" size="1.2"  ></icon-svg>
                    </template>
                  </van-cell>
                </van-cell-group>

                <van-cell-group inset style="margin-top: 10px;">
                  <van-cell size="large" title="配送服务：" :border="false" value="胖虎跑腿 提供送餐服务"  center >
                    <template #icon>
                      <icon-svg icon-class="my-icon-peisong" size="1.2" style="padding-right: .2rem;"></icon-svg>
                    </template>
                  </van-cell>
                  <van-cell size="large" :border="false"  title="配送时间" value="07:00-22:00">
                    <template #icon>
                      <icon-svg icon-class="my-icon-a-shijian21" size="1.1" style="padding-right: .2rem;"></icon-svg>
                    </template>
                  </van-cell>
                </van-cell-group>

              </van-tab>
          </van-tabs>
        </van-col>

      </van-row>
        <!--分享-->
      <van-share-sheet
          v-model="showShare"
          :options="options"
          cancel-text=""
          title="华莱士"
      />
    </div>
</template>

<script>
export default {
  name: "merchantDetail",
  data(){
    return{
      price:32.5,
      active:0,
      showShare:false,
      PayLoading:false,
      num:0,
      activeIndex: 0,
      show:false,
      visible:false,
      evaluate:4.4,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link'},
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
      images: [
        require('@/assets/img/banner.png'),
        require('@/assets/img/banner1.png'),
        require('@/assets/img/banner2.png'),
      ],
      siderbarTitle:[
        {text:'百亿补贴'},
        {text:'必选品'},
        {text:'单人套餐'},
        {text:'多人套餐'},
        {text:'汉堡主食'},
        {text:'甜点小吃'},
        {text:'新品尝试'}]
    }
  },
  methods:{
    Return(){
      this.$router.replace("/");
    },
    onSubmit(){

    },
    addItem(){
        this.num+=1;
    },
    subtractItem(){
      if (this.num != 0){
        this.num-=1;
        return;
      }

    },
    popupClick(){
      if (this.num !=0){
        this.show =true
      }
    },
    desClick(){
      this.$router.replace("/ProductDetail")
    },
    change(name,title){
      console.log(title)
    },
    share(){
      this.showShare= true;
    },
    PayClick(){
      if (this.num<1){
        this.$toast.fail('没有下单任何东西');
        return;
      }

      this.PayLoading =true;
      setTimeout(()=>{
        this.PayLoading =false;
        this.$router.replace("/pay");
      },1500)

    }
  }
}
</script>

<style scoped>
.cateTitle{
  font-size: 1em; font-weight: bold; padding-bottom: 10px;
}
.cateDesc{
  font-size: .9em; color: #7f7f7f;  padding-bottom: 10px;
}
.swipeClass{
  width: 90%; margin: 0 auto;  border-radius: 10px; margin-top: 10px;
}
.itemHeader{
  margin-top:10px;box-shadow: 0px  1px 10px 1px  #eeeeee;
}


</style>
